<template>
	<view class="content">
		<mSearch :mode='2'></mSearch>
		<sun-tab :value.sync="swiperIndex" :tabList="tabSwiperList" :scroll="true"></sun-tab>
		<view class="swiper" :current="swiperIndex" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)"
		 indicator-active-color="rgba(255,255,255,0)" @change="swiperChange">
			<view v-show="swiperIndex===0">
				<recommended />
			</view>
			<view v-show="swiperIndex===1">
				<personalCase />
			</view>
			<view v-show="swiperIndex===2">
				<wholeCase />
			</view>
			<view v-show="swiperIndex===3">
				<project />
			</view>
			<view v-show="swiperIndex===4">
				<research />
			</view>
			<view v-show="swiperIndex===5">
				<creative />
			</view>
			<view v-show="swiperIndex===7">
				<theArticle />
			</view>
		</view>
	</view>
</template>

<script>
	import sunTab from '@/components/sun-tab/sun-tab';
	import recommended from './components/recommended.vue'
	import wholeCase from './components/wholeCase.vue';
	import project from './components/project.vue';
	import research from './components/research.vue';
	import creative from './components/creative.vue';
	import theArticle from './components/theArticle.vue';
	import personalCase from './components/personalCase.vue'

	export default {
		components: {
			sunTab,
			recommended,
			wholeCase,
			project,
			research,
			creative,
			theArticle,
			personalCase
		},
		data() {
			return {
				swiperIndex: 0,
				tabSwiperList: ['推荐', '个案', '全案', '专题', '调研', '创意', '文章'],
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperIndex = e.target.current;
			}
		},

		// onPullDownRefresh() {
		// 	console.log('refresh');
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// }
	}
</script>

<style lang="scss" scoped>
	.content {
		.swiper {
			background: #F4F4F4;
		}
	}
</style>
